<template>
  <div class="page">
    <headerbar>{{ title }}</headerbar>
    <section class>
      <div class="d-scroll list-text">
        <cube-scroll ref="scroll" :options="options">
          <cube-swipe>
            <ul class="tab">
              <li @click="tabClick(0)" :class="{ active: tabIndex == 0 }">
                <span>兑换详情</span>
              </li>
              <li @click="tabClick(1)" :class="{ active: tabIndex == 1 }">
<!--                <span>预约申请</span>-->
                <span>兑换流程</span>
              </li>
            </ul>

            <!-- 兑换详情 -->
            <div v-if="tabIndex == 0">
              <!-- 兑换详情多处使用，单独抽出 -->
              <ForRecordDetailChild :type="3"></ForRecordDetailChild>
            </div>

            <!-- 预约申请 -->
            <div v-if="tabIndex == 1">
              <div class="d-scroll list-text" style>
                <section class="inner-content">
                  <div class="steps">
                    <div class="step" :class="{ active: step >= 1 }">
                      <p>
                        <span class="circle"></span>
                      </p>
                      <span class="title">预约申请</span>
                    </div>
                    <div class="line" :class="{ active: step >= 2 }"></div>
                    <div class="step" :class="{ active: step >= 2 }">
                      <p>
                        <span class="circle"></span>
                      </p>
                      <span class="title">商家确认预约</span>
                    </div>
                    <div class="line" :class="{ active: step >= 3 }"></div>
                    <div class="step step2" :class="{ active: step >= 3 }">
                      <p>
                        <span class="circle"></span>
                      </p>
                      <span class="title">商家确认消费</span>
                    </div>
                  </div>
                  <Apply v-if="step == 1" @applySuccess="applySuccess"></Apply>
                  <MerchantConfirm
                    v-if="step == 2"
                    :chexiao="chexiao"
                    :jlyyTime="jlyyTime"
                    @merchantSuccess="merchantSuccess"
                  ></MerchantConfirm>
                  <!-- 订单详情多处使用，单独抽出 -->
                  <OrderDetailChlid
                    v-if="step == 3"
                    :jlyyTime="jlyyTime"
                    :type="2"
                    :step="stepStatus"
                  ></OrderDetailChlid>
                </section>
              </div>
            </div>
          </cube-swipe>
        </cube-scroll>
      </div>
    </section>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
import Apply from "./apply.vue";
import MerchantConfirm from "./merchantConfirm.vue";
import OrderDetailChlid from "../orderDetailChlid.vue";
import ForRecordDetailChild from "../forRecordDetailChild.vue";
export default {
  components: {
    Apply,
    MerchantConfirm,
    OrderDetailChlid,
    ForRecordDetailChild,
  },
  data() {
    return {
      query: this.$route.query, //从兑换记录进来带参数
      options: {
        pullUpLoad: false,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      stepStatus:0,
      chexiao : true,
      step: 1, // 步骤
      tabIndex: 0,
      title: "兑换详情",
      orderInfo: '',
      orderDetail: '', //订单详细信息(包含预约记录)
      jlyyTimer: null, //获取距离预约时间定时器
      jlyyTime: null, //距离预约时间
    };
  },
  created() {
    this.orderInfo = JSON.parse(sessionStorage.getItem("orderInfo")) //订单信息
    console.log('this.orderInfo',this.orderInfo);
    this.orderDetail = JSON.parse(sessionStorage.getItem("orderDetail")) //订单详细信息(包含预约记录)
    var status = this.query.status;
    if (status == "1") {
      this.step = 2
      //待使用
      this.jlyyFun();
    } else if (status == "2") {
      //已使用
      this.step = 3;
    } else if (status == "4") {
      //待预约
      this.step = 1;
    } else if (status == "5") {
      //待确认
      this.step = 1;
    } else if (status == "6") {
      //预约失败
      this.step = 1;
    } else if (status == "7") {
      //已撤销
      this.step = 1;
    }else if (status == "9") {
      //已过期
      this.step = 3;
    }
  },
  beforeDestroy() {
    clearInterval(this.jlyyTimer);
    clearInterval(this.timer);
  },
  mounted() {
    if(this.query.status == 1){
      this.timer = setInterval(this.get, 3000);
    }
  },
  methods: {
    get() {//定时器刷新接口
      this.fetchService.getOrderStatus(this.orderInfo.id).then((res) => {
        let status = res.data.status;
        console.log(status)
        if (status == "1") {
          this.step = 2
          //待使用
          // this.jlyyFun();
        } else if (status == "2") {
          //已使用
          this.step = 3;
          this.stepStatus = 3
          clearInterval(this.timer);
          clearInterval(this.jlyyTimer);
        }
      })
    },
    // 定时器获取距离预约时间
    jlyyFun() {
      clearInterval(this.jlyyTimer);
      this.jlyyTimer = setInterval(() => {
        var time1 = new Date().getTime();
        var time2 = new Date(
          this.orderDetail.yuyueRecords[0].yuyueDate
        ).getTime();
        /* var time1 = new Date('2019-05-07 12:24:08').getTime();
    var time2 = new Date('2019-05-07 18:24:08').getTime(); */
        this.jlyyTime = this.formatDuring(time2 - time1);
        console.log("距离预约时间还差多少秒", this.formatDuring(time2 - time1));

        if (this.jlyyTime <= 0) {
          //已过期
          this.step = 3;
          this.stepStatus = 4
        }
        if (0 < this.jlyyTime <= 21600) {
          //距离预约时间小于6小时，未过期
          this.step = 2;
          this.chexiao = false
        }
        if (this.jlyyTime > 21600) {
          //距离预约时间大于6小时
          this.step = 2;
          this.chexiao = true
        }
      }, 1000);
    },
    //把时间转换成秒
    formatDuring(mss) {
      let seconds = parseInt(mss / 1000); // 得到秒数
      return seconds;
    },
    // 申请成功
    applySuccess() {
      this.step = 2;
    },
    merchantSuccess() {
      this.step = 3;
    },
    tabClick(num) {
      this.tabIndex = num;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";

.steps {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
  margin: 50px 0 40px;
  .step {
    display: inline-block;
    .circle {
      border-radius: 50%;
      width: 44px;
      height: 44px;
      background-color: transparent;
      border: 1px solid #b5b5b5;
      color: #fff;
      display: inline-block;
      position: relative;
      margin: 0 13px 0 17px;
    }
    .title {
      /*width: 1.66rem;*/
      display: inline-block;
      margin-right: 12px;
      line-height: 0.8rem;
      color: #9b9b9b;
      font-weight: 400;
    }
  }
  .step.active {
    .circle {
      background: url("../../../../../static/images/dangjian/mall/step_active.png")
        no-repeat center center;
      background-size: 102% 102%;
      border: none;
    }
    .title {
      color: #343434;
    }
  }
  .line {
    display: inline-block;
    width: 10%;
    height: 4px;
    background: rgba(189, 189, 189, 1);
    border-radius: 2px;
    position: relative;
    top: -50px;
    &.active {
      background-color: #1a86e1;
    }
  }
}

.list-text .item {
  font-size: $defaultFontSize;
  .name {
    font-weight: bolder;
    padding-bottom: 10px;
  }
  span {
    font-weight: inherit;
    font-size: inherit;
  }
}
</style>
